<template>
	<view>
		<!-- 轮播图 -->
		<swiper indicator-dots autoplay indicator-active-color="white" style="height: 400upx;">
			<swiper-item v-for="(b,i) in goods.banners" :key="i">
				<image style="width: 100%;height: 400upx;" :src="b"></image>
			</swiper-item>
		</swiper>
		<view style="display: flex;flex-direction: row;align-items: center;padding: 15upx 20upx;background-color: #FF387B;color: white;">
			<view style="flex: 1;">
				<text style="font-size: 45upx;font-weight: bold;">￥{{goods.favorablePrice}}</text>
				<text>￥{{goods.retailPrice}}</text>
			</view>
			<text style="font-size: 20upx;background-color: #FF82B1;padding: 8upx 20upx;border-radius: 30upx;">已售数量：{{goods.sales}}</text>
		</view>
		<view style="background-color: white;padding: 20upx;">
			<view style="display: flex;align-items: center;border-bottom: 1upx solid #EEEEEE;padding: 15upx 0;">
				<text style="font-weight: bold;margin-right: 20upx;font-size: 35upx;">{{goods.name}}</text>
				<view style="padding-left: 10upx;border-left: 1upx solid #EEEEEE;">
					<image style="width: 40upx;height: 40upx;" src="../../static/tabbar/mine01.png"></image>
				</view>
			</view>
			<view style="padding: 10upx 0;">
				<view style="font-size: 20upx;line-height: 3;">供应商：{{goods.supplierId == 0 ? '自提':'其他供应商'}}</view>
				<view style="font-size: 28upx;">配送时间：{{goods.deliveryTime}}</view>
			</view>
		</view>

		<view style="background-color: white;padding: 20upx;margin-top: 10upx;">
			<view style="padding: 10upx 0;">
				<view style="font-size: 28upx;">提货点：{{team.address}}</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view style="background-color: white;margin: 10upx 0 100upx 0;">
			<view style="padding: 20upx 0;text-align: center;">
				<view style="font-size: 30upx;color: #FF387B;font-weight: bold;">商品详情</view>
			</view>
			<view>
				<rich-text :nodes="goods.detail"></rich-text>
			</view>
		</view>
		<!-- 底部 -->
		<view style="position: fixed;bottom: 0;left: 0;right: 0;height: 100upx;display: flex;align-items: center;background-color: white;z-index: 100;">
			<view @tap="backHome" style="display: flex;flex-direction: column;align-items: center;padding: 15upx 50upx;">
				<image style="width: 45upx;height: 40upx;" src="../../static/tabbar/home01.png"></image>
				<view style="font-size: 20upx;">回首页</view>
			</view>
			<view @tap="tocart" style="display: flex;flex-direction: column;align-items: center;padding: 15upx 50upx;">
				<image style="width: 45upx;height: 40upx;" src="../../static/tabbar/cart01.png"></image>
				<view style="font-size: 20upx;">购物车</view>
			</view>
			<view style="flex:1;">
				<view v-if="true" style="font-size: 28upx;font-weight: bold;color: white;display: flex;flex-direction: row;justify-content: flex-end">
					<view @tap="showCart(1)" style="padding: 15upx 30upx;background-color: #FF387B;margin: 10upx;border-radius: 35upx;text-align: center;">加入购物车</view>
					<view @tap="showCart(2)" style="padding: 15upx 30upx;background-color: #FF8C2B;margin: 10upx;border-radius: 35upx;text-align: center;">立即购买</view>
				</view>
				<view v-else style="text-align: center;">
					<text style="padding: 15upx 30upx;color: #C7C7C7;font-weight: bold;background-color: #F7F7F7;margin: 10upx;border-radius: 30upx;text-align: center;">立即购买</text>
				</view>
			</view>
		</view>
		<!-- 加入购物车 -->
		<uni-popup ref="cart" type="bottom" @change="popupChange">
			<view style="background-color: white;padding-bottom: 120upx;border-top-left-radius: 15upx;border-top-right-radius: 15upx;">
				<view style="padding: 20upx;border-bottom: 1upx solid #EEEEEE;">
					<view style="display: flex;">
						<image style="width: 250upx;height: 160upx;" src="../../static/5c331ec8ad0767c2f78171ffa13c2ee0.jpg"></image>
						<view style="height: 160upx;margin-left: 10upx;display: flex;flex-direction: column;justify-content: space-between;">
							<view style="font-weight: bold;">{{goods.name}}</view>
							<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
								<view>
									<view style="font-weight: bold;color: #FF387B;line-height: 1;">￥{{goods.favorablePrice}}</view>
									<view style="font-size: 20upx;scolor: #EEEEEE;line-height: 1.5;">￥{{goods.retailPrice}}</view>
								</view>
								<view style="font-weight: bold;display: flex;align-items: center;">
									<image @tap="subtract" style="width: 45upx;height: 45upx;" :src="count > 1 ? '/static/subtract.png' : '/static/subtract01.png'"></image>
									<text style="margin: 20upx;font-size: 35upx;">{{count}}</text>
									<image @tap="add" style="width: 45upx;height: 45upx;" src="../../static/add.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view style="flex-direction: row;font-size: 20upx;line-height: 60upx;margin-top: 10upx;">
						<text style="background-color: #FF541B;color: white;padding: 5upx 20upx;border-radius: 20upx;">已抢{{goods.sales}}件</text>
						<text v-if="goods.inventory" style="padding: 5upx 20upx;">仅剩<text style="color: #F55746;">{{goods.inventory}}</text>件</text>
						<text style="padding: 5upx 20upx;float: right;">预计<text style="color: #F55746;">{{goods.deliveryTime}}</text>配送</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"

	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				goodsId: null,
				goods: null,
				team:null,
				count:1,
				popupShow:false
			}
		},
		onLoad(e) {
			this.goodsId = e.goodsId
			console.log(e.goodsId)
			this.getGoods()
		},
		methods: {
			showCart(type) {
				if(this.popupShow){
					if(type == 1){
						this.addCart()
					}else if(type == 2){
						this.buy()
					}
				}else{
					this.$refs.cart.open()
				}
			},
			addCart(){
				uni.showToast({
					title: '添加到购物车',
					icon: 'none'
				});
			},
			buy(){
				var carts = [{
					count: this.count,
					goods: this.goods
				}]
				uni.navigateTo({
					url:'confirm_order?carts='+encodeURIComponent(JSON.stringify(carts))+'&team='+encodeURIComponent(JSON.stringify(this.team))
				})
				// uni.navigateTo({
				// 	url:'confirm_order?count='+this.count+'&goods='+encodeURIComponent(JSON.stringify(this.goods))+'&team='+encodeURIComponent(JSON.stringify(this.team))
				// })
			},
			getGoods() {
				uni.request({
					url: this.apiUrl + "/client/goods/getInfo",
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						goodsId: this.goodsId
					},
					success: (res) => {
						const result = res.data;
						console.log(result)
						if (result.code === 200) {
							var goods = result.data.goods
							goods.banners = JSON.parse(goods.banners)
							goods.detail = decodeURIComponent(atob(goods.detail))
							goods.detail = goods.detail.replace(/<img/g, '<img style="max-width:100%;height:auto;display:block" ').replace(
								/<section/g, '<div').replace(/\/section>/g, '\div>').replace('white-space: nowrap', '');
							this.goods = goods
							console.log(this.goods.detail)
							this.team = result.data.team
						} else {
							uni.showToast({
								title: result.msg,
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: res.errMsg,
							icon: "none"
						});
					}
				})
			},
			backHome() {
				uni.switchTab({
					url: '../tabbar/home/home'
				})
			},
			tocart() {
				uni.switchTab({
					url: '../tabbar/cart/cart'
				})
			},
			add(){
				this.count++
			},
			subtract(){
				if(this.count > 1){
					this.count--
				}
			},
			popupChange(e){
				console.log(e)
				this.popupShow = e.show
			}
		}
	}
</script>

<style>

</style>
